<template>
	<div class="theme">
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div style="position: relative;z-index: 99999;width: 100%;">
					<van-search v-model="value" :placeholder="$t('Home.v1')" show-action shape="round" @search="onSearch" maxlength="20"></van-search>
					<div class="kf" @click="kf" align="center">
						<van-icon :name="icon.wx" size="18" color="#000000"/>
						<div>{{$t('Home.v2')}}</div>
					</div>
				</div>
				<van-swipe>
					<van-swipe-item v-for="(item,index) in banList" :key="index">
						<van-image width="100%" height="100%" :src="item.img" />
					</van-swipe-item>
				</van-swipe>
				<div class="top">
					<van-row>
						<van-col span="4" class="top-title-left" @click.native="$router.push({path: '/NewsList'})">
							<div style="font-weight: 700;font-size: 17px;font-family: 'KaiTi';" v-html="$t('Home.v3')"></div>
							<div class="top-title-left-bottom">NEWS</div>
						</van-col>
						<van-col span="20" class="top-title-right">
							<div class="van-ellipsis" v-text="list2[0] ? list2[0].title : $t('Home.v4')" @click="list2[0] ? toNewsDetail(list2[0].id) : ''">最近小王获得了大梅沙房子一套!</div>
							<div class="van-ellipsis" v-text="list2[1] ? list2[1].title : $t('Home.v4')" @click="list2[1] ? toNewsDetail(list2[1].id) : ''" style="padding-top: 3px;">最近陈晟获得了钓鱼佬称号一枚!</div>
						</van-col>
					</van-row>
				</div>
				<div class="center">
					<div style="padding-bottom: 10px;">
						<span style="font-size: 17px;">{{$t('Home.v5')}}</span>
						<span style="position: absolute;padding-top: 3px;">
							<van-tag type="danger" color="rgb(254,97,90)" style="transform: scale(0.6);padding: .2em .4em;">NEW</van-tag>
						</span>
					</div>
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" " :loosing-text="$t('MyDividend.v7')" :loading-text="$t('MyDividend.v8')">
						<van-list v-model="loading" :finished="finished" @load="onLoad" :finished-text="$t('Home.v6')">
							<div class="content-product" style="background: white;margin-bottom: 10px;border-radius: 5px;" v-for="(item,index) in list" :key="item.index" @click="$router.push({path: '/PropertyDetails',query:{projectId: item.projectId}})">
								<img :src="item.picture" style="width: 100%;height: 100%;border-top-left-radius: 5px;border-top-right-radius: 5px;" />
								<div style="padding: 10px;">
									<span v-text="item.title">汤臣一品一栋二号楼70平方</span>
									<span style="float: right;font-size: 13px;color: #22a77b;" v-if="item.status == 1">{{$t('Home.v7')}}</span>
									<span style="float: right;font-size: 13px;color: #f94951;" v-if="item.status == 2">{{$t('Home.v8')}}</span>
								</div>
								<div style="padding: 10px;">
									<van-progress v-if="item.ratio" :percentage="Number(parseFloat(Number(item.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b" />
									<van-progress v-if="!item.ratio" :percentage="0" color="#22a77b" />
								</div>
								<div style="padding: 10px;font-size: 12px;">
									<span style="color:#22a77b;" v-text="parseFloat(item.pay).toFixed(5).slice(0,-1)">100</span>
									<span> USDT {{$t('Home.v9')}}</span>
									<span style="float: right;" v-text="$t('Home.v10') + item.validTotal + '人'">已参与1000人</span>
								</div>
							</div>
						</van-list>
					</van-pull-refresh>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { crowdfunding, home } from './../utils/api';
	import { Dialog } from 'vant';
	import { debounce } from './../utils/debounce'; // 函数节流-高频操作需要
	let _this;
	export default {
		name: 'Home',
		components: {},
		props: {},
		data() {
			return {
				banList: [],
				list: [],
				list2: [],
				active: 1,
				size: 10, //每页数量
				current: 1,
				total: '', //总数量
				listLength: '', //当前总数量
				isLoading: false,
				finished: false,
				loading: false,
				icon: {
					wx: require('../assets/images/wx.png'),
				},
				value: '',
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			onSearch(e) {
				crowdfunding.getProject({
					type: 1, // 类型：0 全部 1进行中 2已结束
					current: this.current,
					size: this.size,
					title: this.value
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			getList() {
				crowdfunding.getProject({
					type: 1, // 类型：0 全部 1进行中 2已结束
					current: this.current,
					size: this.size
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data.records;
						this.listLength = res.data.records.length;
						this.total = res.data.total;
						if(this.total > this.listLength) {
							this.size += 10;
							this.loading = false;
						} else {
							// 加载状态结束
							this.finished = true;
							this.loading = false;
						}
					}
				})
			},
			getNoticesNewest() {
				home.getNoticesNewest().then(res => {
					if(res.code == 200) {
						this.list2 = res.data;
					}
				})
			},
			onRefresh() { // 下拉刷新
				this.getList();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: _this.$t('MyDividend.v10')
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.getList();
			},
			kf() {
				home.getCustomer().then(res => {
					if(res.code == 200) {
						this.Customer = res.data.value.split("|").join("<br/>").replace(/\s*/g, "");
						Dialog.alert({
							title: '联系客服',
							messageAlign: 'left',
							message: this.Customer,
							confirmButtonText: 'OK'
						}).then(() => {
							// on close
						});
					}
				})
			},
			toNewsDetail(id) {
				if(!id) {
					return false;
				}
				this.$router.push({
					name: 'NewsDetails',
					query: {
						id: id
					}
				})
			},
			getBanner() {
				home.getBanner().then(res => {
					if(res.code == 200) {
						const baseList = [];
						for(let i = 0; i < res.data.value.split(";").length; i++) {
							baseList.push({
								img: res.data.value.split(";")[i]
							})
						}
						this.banList = baseList;
					}
				})
			}
		},
		created() {
			// 页面不需要登录就能访问切页面上有请求接口，登录和不登录的时候。需要添加此代码
			if(sessionStorage.token) {
				this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
			}
			this.$watch('value', debounce((val) => { // 这里的 val 是输入的值
				if(val) { // 如果存在才执行
					this.onSearch();
				} else {
					this.value = '';
					this.onSearch();
				}
			}, 200));
		},
		mounted() {
			this.getBanner();
			this.getNoticesNewest();
		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.overlay {
		background: rgb(245, 245, 245);
	}
	
	/deep/ .nav {
		margin-top: -5px;
	}
	
	.bgimg {
		height: 250px;
		width: 100%;
		background: url('../assets/images/home.png') no-repeat left top;
		background-size: cover;
	}
	
	/deep/ .van-search {
		/*background: transparent!important;*/
	}
	
	.kf {
		text-align: center;
		font-size: 12px;
		float: right;
		margin-top: -45px;
		margin-right: 5%;
		color: rgb(63, 183, 118);
	}
	
	/deep/ .van-search__action {
		line-height: 15px;
		text-align: center;
		color: transparent;
	}
	
	/deep/ .van-search__content {
		background: rgba(255, 255, 255, 0.3);
		margin-right: 40px;
		background-color: #f7f8fa;
	}
	
	/deep/ .van-field__left-icon .van-icon,
	.van-field__right-icon .van-icon {
		/*color: white;*/
	}
	
	/deep/ input::-webkit-input-placeholder {
		/* WebKit browsers */
		color: rgba(255, 255, 255, 0.6);
	}
	
	/deep/ input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: rgba(255, 255, 255, 0.6);
	}
	
	/deep/ input::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: rgba(255, 255, 255, 0.6);
	}
	
	/deep/ input:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: rgba(255, 255, 255, 0.6);
	}
	
	/deep/ .van-field__control {
		color: white;
	}
	
	.top {
		padding: 10px 15px;
		background: white;
		.top-title-left {
			border-right: 1px solid #C0C0C0;
		}
		.top-title-left-bottom {
			font-weight: 500;
			font-size: 13px;
			color: #999999;
			padding-left: 2px;
			padding-top: 5px;
		}
		.top-title-right {
			padding-left: 15px;
			color: #666666;
		}
	}
	
	.center {
		padding: 10px 15px;
	}
</style>